"use client";

import "./index.css";

import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { LoginFormPage, ProFormText } from "@ant-design/pro-components";
import { Button, message, theme } from "antd";
import React, { CSSProperties } from "react";
import Image from "next/image";
import Link from "next/link";
import { userRegisterUsingPost } from "@/api/userController";
import { useRouter } from "next/navigation";
import { ProForm } from "@ant-design/pro-form/lib";

const iconStyles: CSSProperties = {
  color: "rgba(0, 0, 0, 0.2)",
  fontSize: "18px",
  verticalAlign: "middle",
  cursor: "pointer",
};
/**
 * 用户注册页面
 * @constructor
 */

const UserRegisterPage: React.FC = () => {
  const [form] = ProForm.useForm();
  const router = useRouter();
  /**
   * 登录提交函数
   */
  const doSubmit = async (values: API.UserRegisterRequest) => {
    try {
      const result = await userRegisterUsingPost(values);
      if (result.data) {
        message.success("注册成功,请登录");
        //  自动跳转登录页
        router.replace("/user/login");
        form.resetFields();
      }
    } catch (e) {
      message.error("注册失败，" + e.message);
    }
  };
  const { token } = theme.useToken();
  return (
    <div
      id={"UserRegisterPage"}
      style={{
        backgroundColor: "white",
        height: "100vh",
      }}
    >
      <LoginFormPage
        //    修改提交按钮文言
        submitter={{
          searchConfig: {
            submitText: "注册",
          },
        }}
        form={form}
        backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
        logo={
          <Image
            src={"/assets/logo.ico"}
            width={36}
            height={36}
            alt={"编程刷题平台 - LOGO"}
          />
        }
        backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
        title="编程刷题平台 - 用户注册"
        containerStyle={{
          backgroundColor: "rgba(166,182,245,0.65)",
          backdropFilter: "blur(4px)",
        }}
        subTitle="巴南区最小的编程刷题平台"
        //  提交
        onFinish={doSubmit}
        // activityConfig={{
        //   style: {
        //     boxShadow: "0px 0px 8px rgba(0, 0, 0, 0.2)",
        //     color: token.colorTextHeading,
        //     borderRadius: 8,
        //     backgroundColor: "rgba(255,255,255,0.25)",
        //     backdropFilter: "blur(4px)",
        //   },
        //   title: "活动标题，可配置图片",
        //   subTitle: "活动介绍说明文字",
        //   action: (
        //     <Button
        //       size="large"
        //       style={{
        //         borderRadius: 20,
        //         background: token.colorBgElevated,
        //         color: token.colorPrimary,
        //         width: 120,
        //       }}
        //     >
        //       去看看
        //     </Button>
        //   ),
        // }}
        actions={
          <div
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              flexDirection: "column",
            }}
          ></div>
        }
      >
        {
          <>
            <ProFormText
              name="userAccount"
              fieldProps={{
                size: "large",
                prefix: (
                  <UserOutlined
                    style={{
                      color: token.colorText,
                    }}
                    className={"prefixIcon"}
                  />
                ),
              }}
              //    提示语
              placeholder={"请输入用户账号"}
              //    校验规则
              rules={[
                {
                  required: true,
                  message: "请输入用户账号!",
                },
              ]}
            />
            <ProFormText.Password
              name="userPassword"
              fieldProps={{
                size: "large",
                prefix: (
                  <LockOutlined
                    style={{
                      color: token.colorText,
                    }}
                    className={"prefixIcon"}
                  />
                ),
              }}
              placeholder={"请输入密码"}
              rules={[
                {
                  required: true,
                  message: "请输入密码！",
                },
              ]}
            />
            <ProFormText.Password
              name="checkPassword"
              fieldProps={{
                size: "large",
                prefix: (
                  <LockOutlined
                    style={{
                      color: token.colorText,
                    }}
                    className={"prefixIcon"}
                  />
                ),
              }}
              placeholder={"请输入确认密码"}
              rules={[
                {
                  required: true,
                  message: "请输入确认密码！",
                },
              ]}
            />
          </>
        }
        <div
          style={{
            marginBlockEnd: 26,
            textAlign: "right",
          }}
        >
          已有账号? <Link href={"/user/login"}>去登录</Link>
        </div>
      </LoginFormPage>
    </div>
  );
};

export default UserRegisterPage;
